<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 200px;
			background: orange;
		}

	</style>
</head>
<body>
	<div id="box">
		<button id="btn">点击</button>
	</div>
	<a href="">页面跳转</a>

	<script>
		/*
			event.stopPropagation(); 主流浏览器
			event.cancelBubble = true;  ie
			


			想要给a标签添加事件
			1给a标签href设置javascript:void(0)或javascript:;
			2阻止浏览的默认行为


			阻止浏览器默认行为
			event.preventDefault() //Firefox/Chrome/Opera/Safari
			event.returnValue = false  //ie

		*/
		var box = document.getElementById('box');
		var btn = document.getElementById('btn');
		function showBox () {
			alert("点击了box")
		}
		function showBtn(event){

			alert("点击了BTN");
			event.stopPropagation();
		}

		function showA(event){

			alert("您点击了A标签");
			event.preventDefault();
		}
		box.onclick = showBox;
		btn.onclick = function(event){
			showBtn(event);
		};

		var a = document.getElementsByTagName('a')[0];
		a.onclick = function(){
			showA(event);
		};

	</script>
</body>
</html>